<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="renderer" content="webkit|ie-comp|ie-stand"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <title>{$rrz.seo_title}</title>
    <meta name="description" content="{$rrz.seo_description}"/>
    <meta name="keywords" content="{$rrz.seo_keywords}"/>
    <link href="{env name='website.favicon' /}" rel="shortcut icon"/>
    {skin href="skin/css/cui.css,skin/css/lib.css,skin/css/rrz.css,skin/css/less.css" /}
    {skin href="skin/js/jquery.js,skin/js/rrz.js,skin/js/rrz2.js" /}
</head>
<body>
    {include file="block/header" /}
    <div class="clear"></div>
    <!--img(%IMAGES%/cpxq.jpg)-->
    <div class="ban" style="background-image: url(%IMAGES%/cpxq.jpg);"></div>
    <!--img_end-->
    <div class="main">
        <div class="g-cur">
            <div class="wp"><i class="iconfont icon-shouye" ></i>{crumbs class="crumb"/}</div>
        </div>
        <div class="row-b1">
            <div class="wp">
                {include file="block/left" /}
                <div class="col-r">
                    <div class="m-list1">
                        <div class="m-pic1">
                            <div class="eyou-showcase clearfix">
                                <div class="pc-slide">
                                    <div class="view">
                                        <div class="swiper-container swiper-container-horizontal">
                                            <div class="swiper-wrapper">
                                                {foreach name="$rrz.imgs" item="img"}
                                                <div class="swiper-slide img-center">
                                                    <div class="imgauto"><img src="{$img}" rel="{$img}" class="jqzoom" ></div>
                                                </div>
                                                {/foreach}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="preview">
                                        <a class="arrow-left" href="javascript:;"></a> <a class="arrow-right" href="javascript:;"></a>
                                        <div class="swiper-container swiper-container-horizontal">
                                            <div class="swiper-wrapper">
                                                {foreach name="$rrz.imgs" item="img"}
                                                <div class="swiper-slide">
                                                    <div class="imgauto"><img src="{$img}"></div>
                                                </div>
                                                {/foreach}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {skin file="skin/css/swiper.min3.css" /}
                                {skin file="skin/js/swiper.min3.js" /}
                                <script>
                                    (function () {
                                        $('.preview .swiper-slide').eq(0).addClass('active-nav');
                                        var viewSwiper = new Swiper('.view .swiper-container', {
                                            onSlideChangeStart: function() {
                                                updateNavPosition()
                                            }
                                        })
                                        $('.view .arrow-left,.preview .arrow-left').on('click', function(e) {
                                            e.preventDefault()
                                            if (viewSwiper.activeIndex == 0) {
                                                viewSwiper.slideTo(viewSwiper.slides.length - 1, 1000);
                                                return
                                            }
                                            viewSwiper.slidePrev()
                                        })
                                        $('.view .arrow-right,.preview .arrow-right').on('click', function(e) {
                                            e.preventDefault()
                                            if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
                                                viewSwiper.slideTo(0, 1000);
                                                return
                                            }
                                            viewSwiper.slideNext()
                                        })
                                        var previewSwiper = new Swiper('.preview .swiper-container', {
                                            //visibilityFullFit: true,
                                            slidesPerView: 'auto',
                                            allowTouchMove: false,
                                            onTap: function() {
                                                viewSwiper.slideTo(previewSwiper.clickedIndex)
                                            }
                                        })
                                        function updateNavPosition() {
                                            $('.preview .active-nav').removeClass('active-nav')
                                            var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
                                            if (!activeNav.hasClass('swiper-slide-visible')) {
                                                if (activeNav.index() > previewSwiper.activeIndex) {
                                                    var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
                                                    previewSwiper.slideTo(activeNav.index() - thumbsPerNav)
                                                } else {
                                                    previewSwiper.slideTo(activeNav.index())
                                                }
                                            }
                                        }
                                    })();
                                </script>
                            </div>
                            <div class="m_pic_showpic">
                                <div class="m_showpic" style="position: relative; overflow: hidden; margin: 0px auto; width: 100%; opacity: 1;">
                                    <ul style="width: 300px; height: auto; transform: translate3d(-200px, 0px, 0px); transition: transform 0ms ease 0s;">
                                        {foreach name="$rrz.imgs" item="img"}
                                        <li style="width: 100px; height: auto; float: left; position: relative; overflow: hidden;"> <img src="{$img}"></li>
                                        {/foreach}
                                    </ul>
                                    <div class="banner_btn"><span><a href="javascript:;" class="in"></a></span></div>
                                </div>
                            </div>
                        </div>
                        <div class="m-txt1">
                            <h3>{$rrz.name}</h3>
                            <div class="txt">
                                <p>{$rrz.brief}</p>
                            </div>
                            <!--texts(在线订购)-->
                            <a href="tel:{env name='webinfo.telephone' /}" class="btn"><span>在线订购</span></a>
                            <!--texts_end-->
                        </div>
                    </div>
                    <div class="m-txt2">
                        <p>{$rrz.content|raw} </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {include file="block/footer" /}
    {skin file="skin/css/animate.min.css" /}
    {skin file="skin/js/wow.min.js" /}
    <!-- 放大镜 -->
    {skin file="skin/js/superslide.js,skin/js/jquery.imagezoom.min.js" /}
    <script>
        (function () {
            $(function () {
                $('.imgauto img').imgAuto();
            });
            // 初始化wow.js
            var wow = new WOW({
                boxClass: 'wow',
                animateClass: 'animated',
                offset: 0,
                mobile: false,
                live: true
            });
            if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
                wow.init();
            };
            $(".jqzoom").imagezoom();

            var $zoom = $('.jqzoom');
            $('.eyou-showcase-pic').slide({
                titCell: '.hd ul',
                mainCell: '.bd ul',
                autoPage: true,
                effect: 'left',
                vis: 3
            }).on('mouseenter', '.bd li', function () {
                var src = $(this).find('img').attr('src');
                $zoom.attr('src', src);
                $zoom.attr('rel', src);
                $(this).addClass('active').siblings().removeClass('active');
            }).find('li').eq(0).addClass('active');
        })();
    </script>
</body>
</html>